#

<template>
  <div>
    <div class="search">
      <el-input placeholder="请输入班组名称" style="width: 200px" v-model="teamsName"></el-input>
      <el-input placeholder="请输入工人姓名" style="width: 200px;margin-left:10px" v-model="workerName"></el-input>
      <el-date-picker
          v-model="attendanceMonth"
          type="month"
          placeholder="选择考勤月份"
          style="width: 180px;margin-left: 10px"
      ></el-date-picker>
      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
      <el-button type="primary" plain style="margin-left: 10px" @click="exportExcel">导出</el-button>
    </div>


    <div class="table">
      <el-table :data="tableData" stripe border>
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="workerId" label="工人ID" width="80"></el-table-column>
        <el-table-column prop="workerName" label="姓名">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit1(scope.row)">{{ scope.row.workerName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="teamsName" label="班组名称"></el-table-column>
        <el-table-column prop="identityCard" label="身份证号"></el-table-column>
        <el-table-column prop="cardNumber" label="工资卡号"></el-table-column>
        <el-table-column prop="bank" label="开户行"></el-table-column>
        <el-table-column prop="attendanceDays" label="当月出勤天数"></el-table-column>
        <el-table-column prop="remunerationMethod" label="计酬方式"></el-table-column>
        <el-table-column prop="wageScale" label="工资标准"></el-table-column>
        <el-table-column prop="wagePayable" label="本月应发工资"></el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "SalaryRecord",
  data() {
    return {
      tableData: [], // 表格数据
      pageNum: 1,  // 当前页码
      pageSize: 10, // 每页显示的数量
      total: 0, // 数据总数
      teamsName: null, // 班组名称查询条件
      workerName: null, // 工人姓名查询条件
      attendanceMonth: null, // 考勤月份查询条件
      selection: [] // 勾选的数据
    };
  },
  created() {
    this.load(1); // 加载数据
  },
  methods: {
    handleEdit1(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.$router.push({
        name: "WorkerInformation",
        query: { param: this.form },
      })
    },
    load(pageNum) {
      this.$request.get('/workerInfo', {
        params: {
          page: pageNum,
          pageSize: this.pageSize,
          workerName: this.workerName,
          teamsName: this.teamsName
        }
      }).then(res => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      }).catch(error => {
        console.error('Error loading worker data:', error);
      });
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    reset() {
      this.teamName = null;
      this.workerName = null;
      this.attendanceMonth = null;
      this.load(1);
    },
    exportExcel() {
      // 将四份数据依次添加到表格数据中
      this.tableData.unshift(
          {
            workerId: 1,
            workerName: '张三',
            teamName: 'A班组',
            identityCard: '110101199003071234',
            cardNumber: '6222020111122220000',
            bank: '中国银行',
            attendanceDays: 30,
            remunerationMethod: '计件',
            wageScale: '100元/小时',
            wagePayable: '2000元'
          },
          {
            workerId: 2,
            workerName: '李四',
            teamName: 'B班组',
            identityCard: '110101199003071235',
            cardNumber: '6222020111122220001',
            bank: '中国银行',
            attendanceDays: 31,
            remunerationMethod: '计件',
            wageScale: '100元/小时',
            wagePayable: '2000元'
          },
          {
            workerId: 3,
            workerName: '王五',
            teamName: 'C班组',
            identityCard: '110101199003071236',
            cardNumber: '6222020111122220002',
            bank: '中国银行',
            attendanceDays: 32,
            remunerationMethod: '计件',
            wageScale: '100元/小时',
            wagePayable: '2000元'
          },
          {
            workerId: 4,
            workerName: '赵六',
            teamName: 'D班组',
            identityCard: '231232132131',
            cardNumber: '21212',
            bank: '中国银行',
            attendanceDays: 323,
            remunerationMethod: '计件',
            wageScale: '212',
            wagePayable: '21321'
          }
      );
      // 导出 Excel
      this.getExcel('.table', '工资记录表');
    },
    getExcel(dom, title = '默认标题') {
      var excelTitle = title;
      const wb = XLSX.utils.table_to_book(document.querySelector(dom), { raw: true, sheet: "Sheet1", display: true, cellStyles: true });
      const wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" });
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            excelTitle + ".xlsx"
        );
      } catch (e) {
        console.error('Error exporting Excel:', e);
      }
    }
  }
};
</script>


<style scoped>
.search {
  margin-bottom: 20px;
}


.table {
  overflow-x: auto;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>

